<template>
  <div id="addBlogBox">
      <label>标题：</label>
      <input v-model="title" class="text" type="text">
      <label>描述：</label>
      <input v-model="message" class="text" type="text">
      <div class="checkbox">
         🔥<span>热搜</span> <input v-model="isHot" type="checkbox">
         ✨<span>置顶</span> <input v-model="isTop" type="checkbox">
      </div>
      <div class="addCover">
        <img id="Cover" src="@/assets/addCover.png" width="100%" height="60px" alt="" style="margin-top:10px">
        <input type="file" @change="chooseCover" id="file" multiple>
      </div>
      <p style="text-align:center">
        <button class="submit" @click="submit">提交</button> &nbsp;
        <input type="reset" @click="reset" class="submit"  name="" id="">
      </p>
  </div>
</template>

<script>
export default {
    data(){
        return{
                title:"",
                message:"",
                isHot:false,
                isTop:false,
                imageSrc:"",
        }
    },
    methods:{
        // 选择封面
        chooseCover(){
        // 设置请求头
            let config={
            headers:{"Content-Type":"multipart/form-data"}
            } 
            var file = document.getElementById('file').files[0]
        // 创建文件实例
            let formdata = new FormData();
            formdata.append('file',file,file.name);
            formdata.append('chunk', '0')
        
        this.$http.post("/uploadImage",formdata,config).then((ov)=>{
                this.imageSrc = "http://localhost:8081/downLoadImage/"+ov.data
                //2、 通过编辑器实例 获取 编辑区域子类的实例对象 
                // 我们可以通过上传图片后返回图片链接
                // 然后生成<img>标签插入到该编辑区域
                document.getElementById("Cover").src="http://localhost:8081/downLoadImage/"+ov.data.object
            })
        },
        reset(){
            this.title=""
            this.message=""
            this.isHot=false
            this.isTop=false
        },
        submit(){
            var data = {
                title:this.title,
                message:this.message,
                isHot:this.isHot,
                isTop:this.isTop,
                imageSrc:this.imageSrc
            }
            this.$emit('addBlog', data);
        }
    }
}
</script>

<style lang="less">
    #addBlogBox{
        padding: 10px;
        width:220px;
        height: 300px;
        background: rgb(39, 28, 49);
        position:fixed;
        top: 50%;
        margin-top: -140px;
        left: 90px;
        border-radius: 5px;
        label{
            display: block;
            margin-bottom: 10px;
            margin-top: 10px;
        }
        .text{
            width: 100%;
            height: 30px;
            padding-left: 10px;
            outline: none;

        }
        .text:focus{
            border:3px solid rgb(72, 153, 190);
        }
        .checkbox{
            margin-top: 10px;
            span{
                font-size: 15px;
            }
        }
        .addCover{
            position: relative;
            input{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0px;
                cursor: pointer;
                opacity: 0;
            }
        }
        .submit{
            margin-top: 10px;
            width:50px;
            height: 30px;
            background: greenyellow;
            border-radius: 5px;
            border: none;

        }
    }
   @media screen and (max-width: 1400px) {
    #addBlogBox {
        margin:10px 0;
        width: 100%;
        left: 0;
        top: 0;
        position: relative;
        // background-color:lightblue;
    }
    }
</style>